<template>
	<view class="view-contain">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module :leftIcon="'arrow-left'" title="时政热词" />
		<!-- 名言热词列表 -->
		<mescroll-uni :height="`${height}px`" :down="downOption" :up="upOption" @init="mescrollInit"
			@down="downCallback" @up="upCallback">
			<view class="quote-list">
				<view class="quote-item" v-for="(item, index) in quoteList" :key="item.id">
					<view class="quote-index">{{ index + 1 }}</view>
					<view class="quote-content">
						<view class="quote-text">{{ item.quoteNoun }}</view>
						<view class="quote-info">
							<view class="info-item" v-if="item.explanation">
								<text>{{ item.explanation }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		famousQuotesList
	} from "@/config/api.js";

	export default {
		mixins: [MescrollMixin], // 使用mixin  
		data() {
			return {
				height: 0,
				currentTab: 0,
				quoteList: [],
				total: 0,
				downOption: {
					use: true
				},
				upOption: {
					textNoMore: '没有更多了~',
					toTop: {
						right: '24rpx',
						bottom: '60rpx'
					}
				}
			};
		},
		onLoad() {
			const res = uni.getWindowInfo();
			this.height = res.windowHeight - 100; // 100为组件高度
		},
		methods: {
			// 上拉加载
			async upCallback(page) {
				try {
					let params = `?pageNum=${page.num}&pageSize=${page.size}`;
						params += `&category=word`;


					const res = await famousQuotesList(params);
					if (res && res.rows) {
						this.total = res.total;
						this.mescroll.endBySize(res.rows?.length || 0, res.total);
						if (page.num == 1) this.quoteList = [];
						this.quoteList = this.quoteList.concat(res.rows);
					}
				} catch (error) {
					this.mescroll.endErr();
					uni.$u.toast('获取名言热词失败，请检查网络');
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.view-contain {
		display: flex;
		flex-direction: column;
		background-color: #F5F6F5;
		min-height: 100vh;
	}

	.quote-list {
		padding: 20rpx;
		width: 100%;

		.quote-item {
			display: flex;
			align-items: flex-start;
			background-color: #FFFFFF;
			padding: 24rpx;
			margin-bottom: 20rpx;
			border-radius: 12rpx;

			.quote-index {
				width: 40rpx;
				height: 40rpx;
				background-color: #409EFF;
				color: #FFFFFF;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				margin-right: 20rpx;
				flex-shrink: 0;
			}

			.quote-content {
				flex: 1;

				.quote-text {
					font-size: 30rpx;
					color: #333;
					font-weight: 500;
					line-height: 1.4;
					margin-bottom: 16rpx;
				}

				.quote-info {
					display: flex;
					flex-direction: column;
					gap: 10rpx;

					.info-item {
						display: flex;
						align-items: center;
						font-size: 24rpx;
						color: #666;

						u-icon {
							margin-right: 6rpx;
						}
					}
				}
			}
		}
	}
</style>